<template>
  <a-form
    ref="formRef"
    :model="formState"
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
    autocomplete="off"
    @finish="onFinished"
  >
    <a-form-item label="编码" name="code" :rules="[{ required: true, message: '请输入' }]">
      <a-input v-model:value="formState.code" />
    </a-form-item>

    <a-form-item label="名称" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>

    <a-form-item label="类型" name="type">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.type">
        <a-select-option v-for="item in typeOptions" :key="item.id" :value="item.id">{{
          item.name
        }}</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="地址" name="address" :rules="[{ required: true, message: '请输入' }]">
      <a-input-number :min="1" :max="32" v-model:value="formState.address" />
    </a-form-item>

    <a-form-item label="厂家" name="producer">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.producer">
        <a-select-option value="1">三智盈科</a-select-option>
        <a-select-option value="0">其他</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-form-item>
  </a-form>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';

interface FormState {
  pid: number;
  code: string;
  name: string;
  address: string;
  type: string;
  producer: string;
}
export default defineComponent({
  setup(props, { emit }) {
    const formRef = ref();
    const typeOptions = ref([]);

    const formState = ref<FormState>({
      pid: 0,
      code: '',
      name: '',
      address: '',
      type: '',
      producer: '',
    });

    const setForm = (formData) => {
      formRef.value.resetFields();
      formState.value = formData;
      console.log(formState.value);
    };

    const onFinished = () => {
      emit('finished', formState.value);
    };

    function getTypeOptions() {
      defHttp.get({ url: '/gather-device-type/get-all' }).then((res) => {
        typeOptions.value = res.data;
      });
    }

    getTypeOptions();
    return {
      formState,
      setForm,
      formRef,
      onFinished,
      typeOptions,
    };
  },
});
</script>
  
  